<template>
  <div class="prolistTable">
    <el-table
    :data="prolisttableData"
    border
    style="width: 100%">
      <el-table-column
        prop="priInfo"
        label="商品名称"
        min-width="270">
        <template slot-scope="scope">
          <div class="proInfoBox">
            <img class="proImgInfo" src="~img/banquan_ip_03.png" alt="banquan_ip_03.png">
            <div class="proInfo">
              <div class="proID">{{scope.row.priInfo.proID}}</div>
              <strong class="proName">{{scope.row.priInfo.proName}}</strong>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="proIPname"
        label="授权IP"
        min-width="195">
      </el-table-column>
      <el-table-column
        prop="sqMan"
        label="授权方"
        min-width="183">
      </el-table-column>
      <el-table-column
        prop="sqStatus"
        label="状态"
        min-width="105">
        <template slot-scope="scope">
          <div class="proStatus">{{checkStatus(scope.row.sqStatus)}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sqStatus"
        label="操作"
        min-width="145">
        <template slot-scope="scope">
          <el-button v-if="scope.row.sqStatus === '0'" @click="shouquanHandleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button v-if="scope.row.sqStatus === '4' || scope.row.sqStatus === '1'" @click="editHandleClick(scope.row)" type="text" size="small">申请码</el-button>
          <el-button v-if="scope.row.sqStatus === '1'" type="text" size="small">用码明细</el-button>
          <el-button type="text" v-if="scope.row.sqStatus === '2' || scope.row.sqStatus === '3'" size="small">详情</el-button>
          <el-button @click="delTableClick(scope.row)" v-if="scope.row.sqStatus === '0'" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="stylus">
@import '~styles/varibles.styl'
.delLicenseWrapper {
  width: 410px;
  height: 250px;
  border: 4px solid #fff;
  border-radius: 8px;
  margin: 0 auto;
  top: 50%;
}
.delLicenseWrapper .el-message-box__header {
  height: 45px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 0 10px 0 18px;
}
.delLicenseWrapper .el-message-box__header .el-message-box__title {
  line-height: 44px;
  color: #333333;
  font-size: 16px;
}
.delLicenseWrapper .el-message-box__header .el-message-box__headerbtn {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.delLicenseWrapper .el-message-box__header .el-message-box__headerbtn .el-message-box__close {
  color: rgb(189, 189, 189);
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.delLicenseWrapper .el-message-box__content {
    position: relative;
    padding: 0;
}
.delLicenseWrapper .el-message-box__message p {
  padding-top: 12px;
  font-size: 16px;
  line-height: 106px;
  height: 118px;
  text-align: center;
}
.delLicenseWrapper .el-message-box__btns {
    padding: 0 71px;
    text-align: center;
    height: 40px;
}
.delLicenseWrapper .el-message-box__btns .el-button {
  width: 120px;
  height: 40px;
  padding: 0;
  text-align: center;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
  float: right;
}
.delLicenseWrapper .el-button:focus,.delLicenseWrapper .el-button:hover {
    color: #333333;
    border-color: #E6E6E6;
    background-color: #fff;
}
.delLicenseWrapper .el-message-box__btns .el-button--primary {
    color: #FFF;
    background-color: $baseColor;
    border-color: $baseColor;
    float: left;
    margin-left: 0;
}
.lh-wrap .el-table {
  font-size: 14px;
  color: #333;
}
.lh-wrap .el-button--text {
  color: $baseColor;
}
.lh-wrap .el-button--text:focus, .lh-wrap .el-button--text:hover {
  color: $baseColor;
}
.prolistTable .el-table__header-wrapper thead.has-gutter tr th {
  background-color: #f5f6fa;
  color: #333333;
}
</style>
<script>
export default {
  name: 'ProlistTable',
  methods: {
    shouquanHandleClick (row) {
      console.log(row)
    },
    editHandleClick (row) {
      console.log(row)
      this.$refs.editTable.dialogFormVisible2 = true
    },
    delTableClick (row) {
      this.$confirm('确认要删除该被授权商？', '删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'delLicenseWrapper'
      }).then(() => {
        console.log(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    checkStatus (p) {
      console.log(p)
      if (p === '0') {
        return '编辑中'
      } else if (p === '1') {
        return '用码中'
      } else if (p === '2') {
        return '待审核'
      } else if (p === '3') {
        return '审核退回'
      } else if (p === '4') {
        return '审核通过'
      } else {
        return '状态异常'
      }
    }
  },
  data () {
    return {
      prolisttableData: [{
        priInfo: {
          proID: '0000001',
          proImgSrc: '~img/banquan_ip_03.png',
          proName: '无上魔鬼猫与花无缺'
        },
        proIPname: '永胜洪兴帮帮花图案',
        sqMan: '华夏天地会总坛',
        sqStatus: '0'
      }, {
        priInfo: {
          proID: '0000002',
          proImgSrc: '~img/banquan_ip_03.png',
          proName: '小鱼儿花无缺'
        },
        proIPname: '红花会',
        sqMan: '东北红花会',
        sqStatus: '1'
      }, {
        priInfo: {
          proID: '0000003',
          proImgSrc: '~img/banquan_ip_03.png',
          proName: '白自在的骄傲自大'
        },
        proIPname: '西藏大雪山雪山派',
        sqMan: '太玄白首',
        sqStatus: '2'
      }, {
        priInfo: {
          proID: '0000004',
          proImgSrc: '~img/banquan_ip_03.png',
          proName: '咏咏声声动漫有限公司AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
        },
        proIPname: '金乌派',
        sqMan: '白自在夫人',
        sqStatus: '3'
      }, {
        priInfo: {
          proID: '0000005',
          proImgSrc: '~img/banquan_ip_03.png',
          proName: '大宋丐帮'
        },
        proIPname: '大宋全体丐帮成员',
        sqMan: '乔峰与洪七公',
        sqStatus: '4'
      }, {
        priInfo: {
          proID: '0000006',
          proImgSrc: '~img/banquan_ip_03.png',
          proName: '卡卡抗生素卡卡抗生素卡卡抗生素卡卡抗生素卡卡抗生素'
        },
        proIPname: '冷少龙烈士',
        sqMan: '还是不罢休',
        sqStatus: '0'
      }]
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.proInfoBox
  height 60px
  width 100%
  .proImgInfo
    width 60px
    height 60px
    margin-right 5px
    float left
  .proInfo
    height 60px
    width 73.5%
    float left
    .proID
      height 16px
      line-height 16px
      width 100%
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      color #999999
      font-size 12px
    .proName
      height 44px
      line-height 20px
      padding 2px 0
      width 100%
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 2
      color #333333
      font-size 12px
      font-weight 400
.proStatus
  text-align center
</style>
